<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请输入关键字"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item label="项目审核状态" prop="auditStatus">
          <el-select
            v-model="formData.auditStatus"
            placeholder="请选择项目审核状态"
            clearable
          >
            <el-option label="待审核" value="0"></el-option>
            <el-option label="通过" value="1"></el-option>
            <el-option label="不通过" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery"
            ><i-ep-search />搜索</el-button
          >
          <el-button @click="resetQuery">
            <i-ep-refresh />
            重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <template #header>
        <div class="flex justify-between">
          <div>
            <el-button type="success" @click="openDialog()"
              ><i-ep-plus />新增</el-button
            >
          </div>
        </div>
      </template>

      <el-table
        v-loading="loading"
        :data="ProjectBuilderList"
        highlight-current-row
        border
      >
        <el-table-column
          key="projectName"
          label="项目名称"
          align="center"
          prop="projectName"
          width="260"
        />
        <el-table-column
          key="builderLicenseNum"
          label="施工许可证编号"
          align="center"
          width="160"
          prop="builderLicenseNum"
        >
        </el-table-column>
        <el-table-column
          key="builderName"
          label="项目全称"
          align="center"
          prop="builderName"
        />
        <el-table-column
          key="contractAmount"
          label="中标合同价格"
          width="160"
          align="center"
          prop="contractAmount"
        >
          <!-- <template #default="scope">
            {{ scope.row.contractAmount.toFixed(2) }}
          </template> -->
        </el-table-column>
        <el-table-column
          key="contractStartDate"
          label="开工日期"
          width="200"
          align="center"
          prop="contractStartDate"
        />
        <el-table-column
          key="endDate"
          label="竣工日期"
          width="200"
          align="center"
          prop="endDate"
        />
        <el-table-column
          key="auditStatus"
          label="项目审核状态"
          width="130"
          align="center"
          prop="auditStatus"
        >
          <!-- 待审核 = 0,
                通过 = 1,
                不通过 = 2 -->
          <template #default="scope">
            <el-tag v-if="scope.row.auditStatus === 0" type="info"
              >待审核</el-tag
            >
            <el-tag v-if="scope.row.auditStatus === 1">通过</el-tag>
            <el-tag v-if="scope.row.auditStatus === 2" type="danger"
              >不通过</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="220">
          <template #default="scope">
            <el-button
              type="primary"
              link
              size="small"
              @click="openDialog(scope.row.id)"
              v-if="currentUserId === scope.row.createManagerId"
              ><i-ep-edit />编辑</el-button
            >
            <el-button
              type="primary"
              link
              size="small"
              v-if="currentUserId === scope.row.createManagerId"
              @click="handleDelete(scope.row.id)"
              ><i-ep-delete />删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-if="total > 0"
        v-model:total="total"
        v-model:page="queryParams.pageIndex"
        v-model:limit="queryParams.pageSize"
        @pagination="handleQuery"
      />
    </el-card>
    <!-- 新增/修改弹窗 -->
    <el-dialog
      v-model="dialogAddOrEdit.visible"
      :title="dialogAddOrEdit.title"
      width="50%"
      draggable
      @close="closeDialog"
			close-icon="CloseBold"
		>
      <el-form
        ref="addOrEditFormRef"
        :model="formData"
        :rules="rules"
        label-width="130px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-input
                v-model="formData.projectName"
                placeholder="请输入项目名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" style="margin-left: 20px" @click.prevent="selectProject"
              >选择项目</el-button
            >
          </el-col>
        </el-row>

        <div class="builder_bottom">
          <el-row justify="center">
            <el-col :span="12">
              <el-form-item label="施工项目名称" prop="builderName">
                <el-input
                  v-model="formData.builderName"
                  placeholder="请输入施工项目名称"
                />
              </el-form-item>
              <el-form-item>
                <span style="color: rgb(192, 172, 172)"
                  >对应施工许可证上的名称,或项目+标段名称</span
                >
              </el-form-item>
            </el-col>
          </el-row>

          <el-row justify="center">
            <el-col :span="12">
              <el-form-item label="是否已办理施工许可证" label-width="160">
                <el-switch
                  v-model="isBanli"
                  class="ml-2"
                  inline-prompt
                  style="
                    --el-switch-on-color: #13ce66;
                    --el-switch-off-color: #ff4949;
                  "
                  active-text="已办理"
                  inactive-text="未办理"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="isBanli" justify="center">
            <el-col :span="12">
              <el-form-item
                label="是否已办理施工许可证"
                prop="builderLicenseNum"
                label-width="160"
              >
                <el-input
                  v-model="formData.builderLicenseNum"
                  placeholder="请输入施工许可证"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row justify="center">
            <el-col :span="12">
              <el-form-item label="施工合同金额(元)" prop="contractAmount">
                <el-input
                  type="number"
                  v-model="formData.contractAmount"
                  placeholder="请输入金额(元)"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row justify="center">
            <el-col :span="12">
              <el-form-item label="合同开工日期" prop="contractStartDate">
                <el-date-picker
                  v-model="formData.contractStartDate"
                  type="date"
									format="YYYY-MM-DD"
									value-format="YYYY-MM-DD"
                  placeholder="请选择开工日期"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row justify="center">
            <el-col :span="12">
              <el-form-item label="竣工日期" prop="endDate">
                <el-date-picker
                  v-model="formData.endDate"
                  type="date"
									format="YYYY-MM-DD"
									value-format="YYYY-MM-DD"
                  placeholder="请选择竣工日期"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row justify="center">
            <el-col :span="10">
              <el-form-item label="施工企业信用代码" prop="builderCorpId">
                <el-input
                  v-model="formData.builderCorpId"
                  placeholder="请输入企业信用代码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" style="margin-left: 20px"
                >选择企业</el-button
              >
            </el-col>
          </el-row>

          <el-row justify="center">
            <el-col :span="10">
              <el-form-item label="监理企业代码" prop="superCorpId">
                <el-input
                  v-model="formData.superCorpId"
                  placeholder="请输入监理企业代码"
                />
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" style="margin-left: 20px"
                >选择企业</el-button
              >
            </el-col>
          </el-row>
        </div>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" :loading="loading" @click="handleSubmit">{{
            dialogAddOrEdit.footBtn
          }}</el-button>
          <el-button @click="closeDialog()">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import {
  ProjectBuilderListForm,
  ProjectBuilderForm,
  ParamsType,
} from "@/api/manager/projectbuilder/types";
import {
  getProjectBuilderList,
  addProjectBuilder,
  editProjectBuilder,
  deleteProjectBuilder,
  getProjectBuilderInfo,
} from "@/api/manager/projectbuilder/index";
import { useUserStore } from "@/store/modules/user";
const useUser = useUserStore();

interface SelectDialogType {
  projectShow: boolean;
  constructionShow: boolean;
  supervisorShow: boolean;
}

const total = ref(0);
const map = ref();
const isBanli = ref(false);
const loading = ref(false);
const queryFormRef = ref(ElForm);
const addOrEditFormRef = ref(ElForm);
const ProjectBuilderList = ref<ProjectBuilderListForm[]>();
const formData = reactive<ProjectBuilderForm>({});
const queryParams = reactive<ParamsType>({
  pageIndex: 1,
  pageSize: 20,
});
const dialogAddOrEdit = reactive<DialogOption>({
  visible: false,
  title: "施工项目登记",
  footBtn: "确认登记",
});
const selectDialog = reactive<SelectDialogType>({
  projectShow: false,
  constructionShow: false,
  supervisorShow: false
  
})
const rules = reactive<FormRules<ProjectBuilderForm>>({
  industryType: [
    { required: true, message: "行业主管部门不能为空", trigger: "blur" },
  ],
});
const currentUserId = useUser.objectId;

/* 选择项目 */
function selectProject(){
  selectDialog.projectShow = true;
}

/**
 * 列表查询
 */
async function handleQuery() {
  let list = await getProjectBuilderList(queryParams);
  if (list.type === 0) {
    if (list.success) {
      ProjectBuilderList.value = list.data.list;
      queryParams.pageIndex = list.data.pageNum;
      queryParams.pageSize = list.data.pageSize;
      total.value = list.data.total;
    } else {
      ElMessage.error(list.msg);
    }
  } else {
    ElMessage.error(list.msg);
  }
}

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  queryParams.pageIndex = 1;
  queryParams.pageSize = 20;
  handleQuery();
}

/* 新增/编辑 */
function openDialog(id) {
  dialogAddOrEdit.visible = true;
  if (id) {
    dialogAddOrEdit.title = "施工项目修改";
    dialogAddOrEdit.footBtn = "修改登记";
    getProjectBuilderInfo(id).then(({ data }) => {
      Object.assign(formData, data);
      // formData.id = id;
    });
  } else {
    formData.id = 0;
    dialogAddOrEdit.title = "施工项目登记";
    dialogAddOrEdit.footBtn = "确认登记";
  }
}

/**
 * 项目表单提交
 */
function handleSubmit() {
  addOrEditFormRef.value.validate((valid: any) => {
    if (valid) {
      formData.cityCode = formData.areaCode[1];
      formData.areaCode = formData.areaCode[2];
      loading.value = true;
      const id = formData.id;
      if (id) {
        editProject(id, formData)
          .then((resp) => {
            if (resp.success === true) {
              ElMessage.success(resp.msg);
              closeDialog(true);
              resetQuery();
            } else {
              ElMessage.warning(resp.msg);
            }
          })
          .finally(() => (loading.value = false));
      } else {
        addProject(formData)
          .then((resp) => {
            if (resp.success === true) {
              ElMessage.success(resp.msg);
              closeDialog(true);
              resetQuery();
            } else {
              ElMessage.warning(resp.msg);
            }
          })
          .finally(() => (loading.value = false));
      }
    }
  });
}

/**
 * 关闭弹窗
 */
function closeDialog(query) {
  dialogAddOrEdit.visible = false;
  resetForm();
}

/**
 * 重置表单
 */
function resetForm() {
  addOrEditFormRef.value.resetFields();
  addOrEditFormRef.value.clearValidate();

  formData.id = undefined;
}
</script>

<style lang="less" scoped>
.builder_bottom {
  width: 100%;
  height: 100%;
}
</style>
